<template>
  <div class="index">
    <div class="header flex-between">
      <div class="flex-start">
        <div class="img_wrap">
          <img v-if="detail.image" :src="detail.image" alt="" />
        </div>
        <div class="text-bold m-l-xs" style="color: #262626">
          <div class="m-b-xxs" style="font-size: 15px">{{ detail.productName }}</div>
          <div>{{ detail.barcode }}</div>
        </div>
      </div>
      <div class="text-center">
        <img style="width: 28px; height: 28px" src="@/assets/image/office-icon.png" alt="" />
        <div style="color: #ffb800">官方</div>
      </div>
    </div>
    <div class="content">
      <div class="flex-start">
        <div class="lable">序列号：</div>
        <div class="value">{{ detail.barcode }}</div>
      </div>
      <div class="flex-start">
        <div class="lable">产品编号：</div>
        <div class="value">{{ detail.productSn }}</div>
      </div>
      <div class="flex-start">
        <div class="lable">生产日期：</div>
        <div class="value">{{ detail.createTime }}</div>
      </div>
      <div class="flex-start">
        <div class="lable">型号：</div>
        <div class="value">{{ detail.specification }}</div>
      </div>
      <div class="flex-start">
        <div class="lable">颜色：</div>
        <div class="value">{{ detail.color }}</div>
      </div>
      <div class="flex-start">
        <div class="lable">客服电话：</div>
        <div class="value flex-start">
          <a href="tel:4006785482">
            <span style="color: #3875c6; padding-right: 4px">4006785482</span>
            <img style="width: 14px; height: 14px" src="@/assets/image/mobile-icon.png" alt="" />
          </a>
        </div>
      </div>
    </div>
    <template v-if="dataList.length">
      <div v-for="(item, index) in dataList" :key="index" class="content" style="padding-top: 0">
        <div class="flex-start list-header">
          <div class="lable">记录时间：</div>
          <div class="value">{{ item.createTime }}</div>
        </div>
        <div class="flex-start">
          <div class="lable">记录人：</div>
          <div class="value">{{ item.createUserName }}</div>
        </div>
        <div class="flex-start" style="">
          <div class="lable">机身号：</div>
          <div class="value flex-between" style="width: 100%">
            <span>{{ item.printerSn }}</span>
            <van-button
              v-if="index == 0"
              round
              plain
              type="primary"
              size="mini"
              style="width: 55px; font-size: 12px"
              @click="editTrace(item.id)"
            >
              修改
            </van-button>
          </div>
        </div>
        <div class="flex-start">
          <div class="lable">工单编号：</div>
          <div class="value">{{ item.orderNumber }}</div>
        </div>
        <div class="flex-start">
          <div class="lable">黑白A4：</div>
          <div class="value">
            {{ item.blackA4 }}
            <span v-if="item.incrementBlackA4" class="color-yellow">(+{{ item.incrementBlackA4 }}张)</span>
          </div>
        </div>
        <div class="flex-start">
          <div class="lable">黑白A3：</div>
          <div class="value">
            {{ item.blackA3 }}
            <span v-if="item.incrementBlackA3" class="color-yellow">(+{{ item.incrementBlackA3 }}张)</span>
          </div>
        </div>
        <div class="flex-start">
          <div class="lable">彩色A4：</div>
          <div class="value">
            {{ item.colorA4 }}
            <span v-if="item.incrementColorA4" class="color-yellow">(+{{ item.incrementColorA4 }}张)</span>
          </div>
        </div>
        <div class="flex-start">
          <div class="lable">彩色A3：</div>
          <div class="value">
            {{ item.colorA3 }}
            <span v-if="item.incrementColorA3" class="color-yellow">(+{{ item.incrementColorA3 }}张)</span>
          </div>
        </div>
      </div>
    </template>
  </div>
  <div class="bottom">
    <van-button round block type="primary" @click="addTrace"> 新增追溯记录 </van-button>
  </div>
</template>

<script>
import { useStore } from 'vuex'
import { useRouter, useRoute } from 'vue-router'
import { getAssetsImages } from '@/utils'
import { reactive, toRefs, onBeforeMount } from 'vue'
import { getProductBarcodeDetail, getConsumablesRecordList } from '@/api/consumeTrace.js'
export default {
  setup() {
    const router = useRouter()
    const route = useRoute()
    const getAssetsImages1 = getAssetsImages
    const state = reactive({
      detail: {},
      dataList: []
    })
    onBeforeMount(() => {   
      // const msg = 'href' + JSON.stringify(location.href)
      // alert(msg)
      getDetail()
      getList()
    })
    const getDetail = () => {
      let params = {
        barcode: route.query.barcode
      }
      getProductBarcodeDetail(params).then((res) => {
        state.detail = res
      })
    }
    // 获取追溯记录
    const getList = () => {
      let params = {
        barcodeEq: route.query.barcode,
        current: 1,
        size: 500
      }
      getConsumablesRecordList(params).then((res) => {
        state.dataList = res.records
      })
    }
    const addTrace = () => {
      router.push({
        path: '/addTrace',
        query: {
          barcode: route.query.barcode
        }
      })
    }
    const editTrace = (id) => {
      router.push({
        path: '/addTrace',
        query: {
          barcode: route.query.barcode,
          traceId: id
        }
      })
    }

    return {
      ...toRefs(state),
      addTrace,
      editTrace,
      getAssetsImages1
    }
  }
}
</script>
<style lang="less" scoped>
.index {
  padding: 10px 10px 0;
  background: #f1f5f8;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 64px;
  overflow-y: auto;
}
.header {
  padding: 12px;
  background: #ffffff;
  box-shadow: 0px 2px 8px 0px rgba(109, 130, 157, 0.22);
  border-radius: 8px 8px 8px 8px;
  margin-bottom: 10px;
}
.img_wrap {
  width: 120px;
  height: 80px;
  border-radius: 8px;
  background: #eee;
  img {
    border-radius: 8px;
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
}
.content {
  padding: 12px;
  background: #ffffff;
  box-shadow: 0px 2px 8px 0px rgba(109, 130, 157, 0.22);
  border-radius: 8px 8px 8px 8px;
  font-size: 14px;
  margin-bottom: 10px;
  > div {
    margin-bottom: 10px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .lable {
    color: #666;
    flex-shrink: 0;
    width: 70px;
    text-align: right;
  }
  .value {
    color: #666;
  }
  .color-yellow {
    color: #ffa323;
  }
  .list-header {
    background: #e8f3ff;
    margin-left: -12px;
    margin-right: -12px;
    padding: 12px;
    .lable,
    .value {
      color: #3875c6;
    }
  }
}
.bottom {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #f1f5f8;
  padding: 10px 16px;
}
</style>
